<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>

    <title>摇钱树</title>
    <link rel="stylesheet" href="../common/css/normalize.css">
    <link rel="stylesheet" href="../common/css/common.min.css">
    <link rel="stylesheet" href="../common/css/iconfont.css">
    <link rel="stylesheet" href="../common/css/animate.css">
    <link rel="stylesheet" href="css/gifts.min.css">
</head>
<body>
    <div id="gifts">
	    <transition>
	        <div class="ready " :class="{gameing:!homePage}" >
			<div class="banner">
				<img src="img/banner.png" alt="">
			</div>

		    <div class="begin text-center"  >
			    <div class="fz15 chance text-center " >
	                (你还有<span>{{count}}</span>个礼物可拆)
	            </div>
			    <button  class="btn btn-now mt10 animated" :class="{tada:homePage}" @click="getResult()"  v-show="homePage">
				    <img src="img/index_btn.png" alt="">
			    </button>
		    </div>
	    </div>
		</transition>
        <div class="footer">
            <a href="../common/prize.html">我的奖品</a>
            <span>|</span>
            <a href="../common/rule.html">活动规则</a>
        </div>
        <div class="toast" v-show="isShow">
            <div class="bg"></div>
            <div class="con text-center">
                <div class="win" v-show="win" >
                    <div class="prize prize-step2">
	                    <div class="fz22 gongxi">恭喜你! </div>
	                    <p class="prize-name">获得kindle一台</p>
	                    <img class="prize-img" src="../common/img/prize.jpg" alt="" >
	                    <a href="../common/getPrize.html" class="btn btn-yellow" >兑换</a>
	                    <div class="hui666 prize-name mt10">

		                    <p>线下门店兑换（当面核销有效）</p>

							<p>兑换地址：成都市天府五街银泰城14F-8</p>

		                    <p class="fff mt20">有效期：2018/03/25-2018/04/25</p>

	                    </div>
	                    <div class="close">
	                        <i class="iconfont icon-close" @click="close()"></i>
	                    </div>
                     </div>
                </div>
            </div>
        </div>
	    <div class="lose" v-show="lose">
            <div class="">未中奖 再接再厉 </div>
        </div>
    </div>

	<script src="../common/js/common.js"></script>
	<script src="../common/lib/vue.min.js"></script>

	<script>
		const gifts = new Vue({
			el: '#gifts',
			data: {
                isShow:false,  // 显示toast
                win:false,   // 默认中奖, 没中奖就显示没中奖的div
                lose:false,
                count:3,
				homePage:true,
			},
			methods:{
                getResult:function () {  //根据接口设置是否抽奖,   中奖win设置为true, 否则显示失败信息
                    const that = this

                    if(that.count <= 0 ) { return}
                    that.count--

	                //隐藏元素
	                that.homePage = !that.homePage

                    that.win = !that.win   // 中奖设置win为true

                    if(that.win){
                        that.yes()
                    }else{
                        setTimeout(function () {
                            that.lose = true // 未中奖设置 lose 为true
                            setTimeout(function () {
                                that.lose = false
                                that.homePage = !that.homePage
                            },2000)
                        },1000)
                    }
                },
                yes: function () {  //中奖
                    const that = this
                    setTimeout(function () {
                        that.isShow = !that.isShow  //显示toast
                    },1500)
                },
                again: function () {  //没中奖
                    const that = this
                    setTimeout(function () {

                    },1500)
                },
                close: function () {
                    const that = this
                    that.isShow = !that.isShow
                    that.homePage = !that.homePage

                }
			}
		})
	</script>
</body>
</html>